<script setup lang="ts">
  import { ref } from 'vue'
  import type { IQColumns, TQRows } from '@/composables/useQTable'
  import { getTableConfig } from '@/composables/useQTable'
  const { selected, pagination, paginationLabel, selectedRowsLabel, onUpdatePagination } =
    getTableConfig()
  const columns: IQColumns = [
    { name: 'uuid', label: '餐厅名', field: 'uuid', align: 'left' },
    { name: 'username', label: '订单人', field: 'name', align: 'left' },
    { name: 'order', label: '下单房号', field: 'order', align: 'left' },
    { name: 'phone', label: '联系方式', field: 'phone', align: 'left' },
    { name: 'money', label: '总金额', field: 'money', align: 'left' }
  ]
  const rows = ref<TQRows>([
    { uuid: '兰州拉面1', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '100$' },
    { uuid: '兰州拉面2', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '2000$' },
    { uuid: '兰州拉面2', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '6000$' },
    { uuid: '兰州拉面3', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '4000$' },
    { uuid: '兰州拉面4', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '3000$' },
    { uuid: '兰州拉面5', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '1000$' },
    { uuid: '兰州拉面6', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '8000$' },
    { uuid: '兰州拉面7', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '9000$' },
    { uuid: '兰州拉面8', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '100$' },
    { uuid: '兰州拉面9', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '700$' },
    { uuid: '兰州拉面10', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '80$' },
    { uuid: '兰州拉面11', name: 'tom', order: '三楼302室', phone: '0755-6786899', money: '1900$' }
  ])
</script>

<template>
  <q-page class="bg-[#FAFCFF] p-5">
    <div class="bg-white p-5">
      <q-table
        title="订餐管理"
        flat
        wrap-cells
        separator="cell"
        table-class="ud-table"
        rows-per-page-label="每页显示"
        :pagination-label="paginationLabel"
        :selected-rows-label="selectedRowsLabel"
        @update:pagination="onUpdatePagination"
        :rows-per-page-options="[2, 7, 10, 15, 20, 25, 50]"
        :rows="rows"
        :columns="columns"
        row-key="name"
        selection="multiple"
        :pagination="pagination"
        v-model:selected="selected" />
    </div>
  </q-page>
</template>

<style scoped></style>
